<script setup lang="ts" name="VideoPlayerProperty">
import { VideoPlayerProperty } from './config'
import { usePropertyForm } from '@/components/Designer/utils/index'

// 视频播放属性面板

const props = defineProps<{ modelValue: VideoPlayerProperty }>()
const emit = defineEmits(['update:modelValue'])
const { formData } = usePropertyForm(props.modelValue, emit)
</script>

<template>
  <MallProperty v-model="formData.style">
    <template #style>
      <ElFormItem label="高度" prop="height">
        <ElSlider v-model="formData.style.height" :max="500" :min="100" show-input input-size="small" :show-input-controls="false" />
      </ElFormItem>
    </template>
    <ElForm label-width="80px" :model="formData">
      <ElFormItem label="上传视频" prop="videoUrl">
        <UploadFile v-model="formData.videoUrl" :file-type="['mp4']" :limit="1" :file-size="100" class="min-w-80px" />
      </ElFormItem>
      <ElFormItem label="上传封面" prop="posterUrl">
        <UploadImage v-model="formData.posterUrl" draggable="false" height="80px" width="100%" class="min-w-80px">
          <template #tip> 建议宽度750 </template>
        </UploadImage>
      </ElFormItem>
      <ElFormItem label="自动播放" prop="autoplay">
        <ElSwitch v-model="formData.autoplay" />
      </ElFormItem>
    </ElForm>
  </MallProperty>
</template>

<style scoped lang="scss"></style>
